<template>
	<view>
		<view class="top mb-40" style="display: flex;align-items: center;">

			<view @click.stop="changeLeftTab(index)" class="flex-center" :class="index==curTab?'top_box1':'top_box2'"
				v-for="(item,index) in cateGoodslist" :key="index">
				{{item.name}}
			</view>
		</view>
		<!-- @click="product(index+1,item.chongdian_info.project_name,item.chongdian_info.id)" -->
		<view  @click="product(index+1,item.chongdian_info.project_name,item.id)"  class="w100 mb-60" style="position: relative;" v-for="(item,index) in vip" :key="index">
			<image style="width: 100%; height: 350rpx;border-radius: 20rpx;position: absolute;top: 0;"
				:src="item.chongdian_info.project_image_project_view_url" mode="widthFix"></image>
			<!-- <image style="width: 250rpx;height: 250rpx;position: absolute;right: -20rpx;top: 30rpx;"
					src="../../static/images/home/box-1.png" mode=""></image> -->
			<view class=" p-x-40 p-y-40" style="position: relative;">
				<view style="display: flex;align-items: center;">
					<!-- <image style="width: 54rpx;height: 56rpx;margin-right: 20rpx;"
							src='../../static/images/home/tag1.png' mode=""></image> -->
					<view class="bots1 ">
						{{item.chongdian_info.project_name}}
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<view class="mt-50" style="margin-right: 40rpx;">
						<view class="s2">
							{{item.chongdian_info.days}}天
						</view>
						<view class="s3 mt-30">
							产品周期
						</view>
					</view>
					<view class="mt-50" style="margin-right: 40rpx;">
						<view class="s2">
							{{item.chongdian_info.project_price_ytc}}
						</view>
						<view class="s3 mt-30">
							产品金额
						</view>
					</view>
					<view class="mt-50">
						<view class="s2">
							{{item.chongdian_info.days_interval}}
						</view>
						<view class="s3 mt-30">
							每天返利
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				vip: [],
				curTab: 0,
				cateGoodslist: [{
						name: '在线设备'
					},
					{
						name: '过期设备'
					}
				]
			}
		},
		onShow() {
			this.project()
		},
		methods: {
			//产品
			product(type, name, id) {
				uni.navigateTo({
					url: '/pages/device/deatil??type=' + type + '&name=' + name + '&id=' + id
					// url: '/pages/index/product?type='+type
				})
			},
			deatil() {
				let name = ''
				if (this.curTab == 0) {
					name = '在线设备'
				} else {
					name = '过期设备'
				}
				uni.navigateTo({
					url: '/pages/device/deatil?nmae=' + name
				})
			},
			changeLeftTab(id) {
				this.curTab = id
				this.project()

			},
			async project() {
				let res = await this.$http.get('user/get_project_log', {
					status: this.curTab + 1
				})
				console.log('project res: ', res);
				this.vip = res.data
			},

		}
	}
</script>

<style>
	page {
		background-color: #1E2240;
		padding: 32rpx;
	}

	.top {
		padding: 0 10rpx;
		height: 112rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: rgba(15, 17, 34, 1);
	}

	.top_box1 {
		width: 50%;
		height: 96rpx;
		opacity: 1;
		border-radius: 50rpx;
		background: rgba(40, 44, 74, 1);
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(147, 149, 164, 1);
	}

	.top_box2 {
		width: 50%;
		height: 96rpx;
		opacity: 1;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(147, 149, 164, 1);
	}

	.bots1 {
		font-size: 46rpx;
		font-weight: 400;
		color: #fff;
		margin-left: 70rpx;
		margin-top: 20rpx;
	}

	.s2 {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.s3 {
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
	}
</style>